<template>
	<view class="">
		<image style="width: 750rpx;height: 260rpx;position: absolute;top: 80rpx;z-index: 0;"
			src="../../static/bg@2x(1).png" mode="">
		</image>
		<view class="tankswiper">
			<zetank-swiper :height="140" :radius="10" :imageList="imageList" type="default"></zetank-swiper>
		</view>
		<view class="other flex-between">
			<view class="flex">
				<image src="../../static/other(1).png" mode=""></image>
				<view class="">{{$t('lease.name11')}}</view>
			</view>
			<view class="flex">
				<image src="../../static/other(4).png" mode=""></image>
				<view class="">{{$t('lease.name12')}}</view>
			</view>
			<view class="flex">
				<image src="../../static/other(3).png" mode=""></image>
				<view class="">{{$t('lease.name13')}}</view>
			</view>
			<view class="flex">
				<image src="../../static/other(2).png" mode=""></image>
				<view class="">{{$t('lease.name14')}}</view>
			</view>
		</view>
		<!-- 分类 -->
		<view class="classList">
			<view class="classItem" @click="jump(item.url)" v-for="(item,index) in classList" :key="index">
				<image :src="$fun.imgUrl(item.image)" mode=""></image>
				<view class="text">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="">
			<view class="nodetype">
				<view class="nodet">-{{$t('lease.name15')}}-</view>
				<view class="img flex-between">
					<image :src="$fun.imgUrl(image1.image)" @click="$fun.jump(image1.url)" mode="">
					</image>
					<image :src="$fun.imgUrl(image2.image)" @click="$fun.jump(image2.url)" mode="">
					</image>
				</view>
			</view>
			<view class="nodetype">
				<view class="nodet">-{{$t('lease.name1')}}-</view>
				<view class="img1 flex-between" @click="$fun.jump(image3.url)">
					<image :src="$fun.imgUrl(image3.image)" mode=""></image>
				</view>
			</view>
			<view class="nodetype">
				<view class="nodet">-{{$t('lease.name2')}}-</view>
				<view class="img1 flex-between" @click="$fun.jump(image4.url)">
					<image :src="$fun.imgUrl(image4.image)" mode=""></image>
				</view>
			</view>
			<view class="bot">
				<image class="imgag1" style="width: 750rpx;height: 1420rpx;" :src="$fun.imgUrl(image5.image)" mode="">
				</image>
				<!-- <image class="imgag2" style="width: 750rpx;height: 750rpx;" :src="$fun.imgUrl(image6.image)" mode="">
				</image> -->

			</view>
		</view>
		<view class="cnmap" style="">
			<!-- <web-view :fullscreen="false" style="width: 750rpx;height: 824rpx;" :webview-styles="webviewStyles"
				src="/static/hhy_bigData/index.html"></web-view> -->
			<!-- <echarts ref="updataEcharts" :option='option1' style="width: 100%;height: 824rpx;"></echarts> -->
			<qiun-data-charts type="map" :canvas2d="true" :opts="config" canvasId="mapma" :chartData="chartsDataMap"
				 ref="tool" />
		</view>

		<image @click="$fun.jump(`/pageC/lease/leaselist`)"
			style="width: 120rpx;height: 120rpx;position: fixed;bottom: 229rpx;right: 30rpx;"
			src="../../static/plist.png" mode=""></image>
	</view>
</template>

<script>
	import zetankSwiper from "@/components/zetank-swiper/components/zetank-swiper/zetank-swiper.vue"
	// import * as echarts from '@/uni_modules/lime-echart/static/echarts.min';
	var mapData = require('../../util/map/china.json')
	import mapdata from '@/util/map/china.json'
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js'
	export default {
		components: {
			zetankSwiper,
		},
		data() {
			return {
				//地图数据
				chartsDataMap: {
					series: []
				},
				// 覆盖的是 option
				config: {
					extra: {
						map: {
							mercator: true
						}
					}
				},
				mapData: mapData,
				updata: true,
				addshow: false,
				lineModal: false,
				showgo: false,
				equipmentInfo: {
					count: 0
				},
				list: [],
				page: 1,
				limit: 20,
				count: 0,
				activeTab: 2,
				isAdd: false,
				vlan: -1,
				showmodel: false,
				scrollheight: 0,
				statusBarHeight: 0,
				columns1: [],
				imageList: [],
				classList: [],
				image1: {},
				image2: {},
				image3: {},
				image4: {},
				image5: {},
				image6: {},
				webviewStyles: {
					progress: {
						width: '750rpx',
						height: '824rpx'
					}
				},
				geoCoordMap: [],
				timer: '',
				chartData: {},
				chartData1: [],
				//您可以通过修改 config-ucharts.js 文件中下标为 ['map'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					timing: "easeOut",
					duration: 1000,
					rotate: false,
					rotateLock: false,
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [0, 0, 0, 0],
					fontSize: 13,
					fontColor: "#666666",
					dataLabel: true,
					dataPointShape: true,
					dataPointShapeType: "solid",
					touchMoveLimit: 60,
					enableScroll: false,
					enableMarkLine: false,
					geo: [{
						map: 'china',
						roam: true,
						label: {
							normal: {
								show: true,
								textStyle: {
									color: '#000000'
								}
							}
						},
						itemStyle: {
							normal: {
								areaColor: '#f3f3f3',
								borderColor: '#000000'
							},
							emphasis: {
								areaColor: '#f3f3f3'
							}
						}
					}],
					extra: {
						map: {
							border: true,
							borderWidth: 1,
							borderColor: "#666666",
							fillOpacity: 0.6,
							// activeBorderColor: "#F04864",
							// activeFillColor: "#FACC14",
							// activeFillOpacity: 1,
							mercator: false,
							active: false,
							activeTextColor: "#FFFFFF"
						},
					}
				},
			}
		},
		// 分享好友
		onShareAppMessage() {
			return {
				title: '火虎智算',
				path: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '火虎智算',
				query: JSON.parse(uni.getStorageSync('gitH5Qrcode')),
			}
		},
		onShow() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
		},
		onBackPress() {
			clearInterval(this.timer)
		},
		onLoad() {
			this.imgindex()
			// this.getServerData1()
		},
		mounted() {

		},
		onReady() {
			this.getServerData1()
		},
		created() {

			//@/uni_modules/qiun-data-charts/js_sdk/u-charts/config-ucharts.js 更详细配置的查看此处
			// 文档可看 https://ext.dcloud.net.cn/plugin?id=271

			//https://demo.ucharts.cn/#/  在线生成工具 配置代码config-ucharts.js内容
			uCharts.map = {
				"type": "map",
				"canvasId": "",
				"canvas2d": false,
				"background": "none",
				"animation": true,
				"timing": "easeOut",
				"duration": 1000,
				"color": ['#FFFFFF'],
				"padding": [
					0,
					0,
					0,
					0
				],
				"fontSize": 8,
				"rotate": false,
				"errorReload": true,
				"fontSize": 8,
				"fontColor": "#fff",
				"enableScroll": false,
				"touchMoveLimit": 60,
				"enableMarkLine": false,
				"dataLabel": true,
				"dataPointShape": false,
				"dataPointShapeType": "solid",
				"tapLegend": false,
				"extra": {
					"map": {
						"border": true,
						"mercator": false,
						"borderWidth": 1,
						"borderColor": "rgba(26,82,231, 1)",
						"fillOpacity": 0.6,
						"activeBorderColor": "#FFFFFF",
						// "activeFillColor": "#FF0033", //设置 鼠标 悬停 地图展示的背景颜色
						"activeFillOpacity": 0.6,
						"active":false
					},
					"tooltip": {
						"showBox": false,
					}
				}
			}

			//模拟从服务器获取数据
			this.getServerData1()
			//自定义格式化Tooltip显示内容  
			// uCharts.formatter.tooltipFun = (item, category, index, opts, ) => {
			// 	console.log(item, index, opts, "=item, category, index, opts=")
			// 	var runidx = Math.floor(Math.random() * 3);
			// 	var typeidx = Math.floor(Math.random() * 6);
			// 	var dataidx = Math.floor(Math.random() * 32);
			// 	var getAddress = this.getAddress(dataidx, typeidx)
			// 	var name = this.getName(runidx)
			// 	return item.data.storeSym ? name + getAddress : name + getAddress
			// }
			// setInterval(() => {
			// 	this.getIndex()
			// }, 2000)

		},
		methods: {
			convertData(data, type) {
				/*type:1 地图参数；type:2数据参数*/
				var res = [];
				for (var i = 0; i < data.length; i++) {
					var geoCoord = this.geoCoordMap[i].properties.name;
					if (geoCoord) {
						if (type == 2) {
							res.push({
								name: data[i].name,
								value: geoCoord.concat(data[i].value),
								username: data[i].username,
								telphone: data[i].telphone,
								address: data[i].address
							});
						} else {
							res.push({
								name: data[i].name,
								value: geoCoord.concat(data[i].value)
							});
						}
					}
				}
				//console.log(res);
				return res;
			},
			getTel() {
				var n = 2,
					telstr = '1';
				while (n < 12) {
					if (n < 3) {
						while (1) {
							var nums = Math.floor(Math.random() * 10);
							if (nums !== 0 && nums !== 1 && nums !== 2 && nums !== 3 && nums !== 4 && nums !== 6) {
								telstr += nums;
								break;
							}
						}

					} else if (n > 3 && n < 8) {
						telstr += '*';
					} else {
						telstr += Math.floor(Math.random() * 10);
					}
					n++;
				}
				return telstr;
			},

			getName(type) {
				var name = '';
				var roundnum = Math.floor(Math.random() * 32);
				var namedata = [{
						name: '张'
					}, {
						name: '刘'
					}, {
						name: '李'
					}, {
						name: '邓'
					}, {
						name: '熊'
					}, {
						name: '田'
					}, {
						name: '周'
					}, {
						name: '赵'
					}, {
						name: '钱'
					}, {
						name: '孙'
					},
					{
						name: '吴'
					}, {
						name: '郑'
					}, {
						name: '王'
					}, {
						name: '冯'
					}, {
						name: '陈'
					}, {
						name: '杨'
					}, {
						name: '朱'
					}, {
						name: '秦'
					}, {
						name: '许'
					}, {
						name: '徐'
					},
					{
						name: '何'
					}, {
						name: '曹'
					}, {
						name: '陶'
					}, {
						name: '邹'
					}, {
						name: '苏'
					}, {
						name: '范'
					}, {
						name: '彭'
					}, {
						name: '鲁'
					}, {
						name: '马'
					}, {
						name: '方'
					},
					{
						name: '唐'
					}, {
						name: '顾'
					}
				];
				switch (type) {
					case 1:
						name = namedata[roundnum].name + '先生';
						break;
					case 2:
						name = namedata[roundnum].name + '女士';
						break;
					default:
						name = namedata[roundnum].name + '先生';
						break;
				}
				return name;
			},

			getAddress(num, type) {
				var addstr = '';
				var chinaDatas = [{
						name: '北京',
						value: 36
					},
					{
						name: '福建',
						value: 65
					},
					{
						name: '广东',
						value: 53
					},
					{
						name: '上海',
						value: 48
					},

					{
						name: '河北',
						value: 95
					},
					{
						name: '天津',
						value: 62
					},
					{
						name: '山西',
						value: 12
					},
					{
						name: '陕西',
						value: 2
					},
					{
						name: '甘肃',
						value: 4
					},
					{
						name: '宁夏',
						value: 5
					},
					{
						name: '青海',
						value: 3
					},
					{
						name: '新疆',
						value: 3
					},
					{
						name: '西藏',
						value: 5
					},
					{
						name: '四川',
						value: 22
					},
					{
						name: '重庆',
						value: 12
					},
					{
						name: '山东',
						value: 9
					},
					{
						name: '河南',
						value: 9
					},
					{
						name: '江苏',
						value: 24
					},
					{
						name: '安徽',
						value: 15
					},
					{
						name: '湖北',
						value: 6
					},
					{
						name: '浙江',
						value: 15
					},
					{
						name: '内蒙古',
						value: 3
					},
					{
						name: '江西',
						value: 34
					},
					{
						name: '湖南',
						value: 12
					},
					{
						name: '贵州',
						value: 8
					},
					{
						name: '广西',
						value: 16
					},
					{
						name: '海南',
						value: 37
					},
					{
						name: '辽宁',
						value: 2
					},
					{
						name: '吉林',
						value: 4
					},
					{
						name: '云南',
						value: 34
					},
					{
						name: '黑龙江',
						value: 5
					},
					{
						name: '台湾',
						value: 43
					}
				];
				switch (type) {
					case 1:
						addstr = '在' + '-系统上线了一台小盒子';
						break;
					case 2:
						addstr = '在' + '-系统上线了一台X86';
						break;
					case 3:
						addstr = '在' + '-系统上线了一台V聚合';
						break;
					case 4:
						addstr = '在' + '-系统下线了一台小盒子';
						break;
					case 5:
						addstr = '在' + '-系统下线了一台X86';
						break;
					default:
						addstr = '在' + '-系统下线了一台V聚合';
						break;
				}
				return addstr;
			},
			// 点击tabs
			handleTabs(item) {
				this.activeTab = item.index
				this.type = item.type
				if (item.index == 1) {
					this.scrollheight = this.scrollheight + 50
				} else {
					this.scrollheight = uni.getWindowInfo().windowHeight - 180 - this.statusBarHeight
				}
				if (item.index == 0) {
					// this.getUserSnList(this.page, this.limit)
					this.$fun.jump(`/pages/equipment/equipment?activeTab=${item.index}`, 2)
				} else if (item.index == 2) {
					// this.releaseSn()
				} else {
					// this.getBindList(this.page, this.limit)
					this.$fun.jump(`/pages/equipment/equipment?activeTab=${item.index}`, 2)
				}
			},
			imgindex() {
				this.$fun.ajax.post('index/index', {}).then(res => {
					// console.log(res)
					let imgList = res.data.advert
					for (var i = 0; i < imgList.length; i++) {
						imgList[i].src = this.$fun.imgUrl(imgList[i].image)
					}
					this.imageList = imgList
					this.classList = res.data.category
					this.release_img = res.data.release_img
					this.release_img.map((var1) => {
						switch (var1.id) {
							case 101:
								this.image1 = var1
								break;
							case 102:
								this.image2 = var1
								break;
							case 103:
								this.image3 = var1
								break;
							case 104:
								this.image4 = var1
								break;
							case 105:
								this.image5 = var1
								break;
							case 106:
								this.image6 = var1
								break;
							default:
								break;
						}
					})

				})
			},
			jump(url) {
				this.$fun.jump(url)
			},
			back() {
				if (this.activeTab == 2) {
					this.$fun.jump(`/pages/equipment/equipment?activeTab=0`, 2)
				} else {
					uni.navigateBack()
				}
			},
			addColor(count) {
				if (count > 800) {
					return '#bc3e10';
				} else if (count > 700) {
					return '#fc5902';
				} else if (count > 500) {
					return '#fc9c02';
				} else if (count > 400) {
					return '#fbdb0f';
				} else if (count > 200) {
					return '#93ce05';
				} else {
					return '#62ae02';
				}
			},
			//鼠标点击地图 会触发该事件
			getIndex(e) { // 点击地图进行操作
				// console.log(e, "===uCharts====")
				var dataidx = Math.floor(Math.random() * 32);

				// console.log(mapData.features[dataidx].)
				console.log(mapData)
				// uCharts.formatter.tooltipFun = (item, category, index, opts) => {
				// 	console.log(item, index, "=item, category, index, opts=")
				// 	var runidx = Math.floor(Math.random() * 3);
				// 	var typeidx = Math.floor(Math.random() * 6);
				// 	var dataidx = Math.floor(Math.random() * 32);
				// 	var getAddress = this.getAddress(dataidx, typeidx)
				// 	var name = this.getName(runidx)
				// 	return item.data.storeSym ? name + getAddress : name + getAddress
				// }
				var runidx = Math.floor(Math.random() * 3);
				var typeidx = Math.floor(Math.random() * 6);
				var dataidx = Math.floor(Math.random() * 32);
				var getAddress = this.getAddress(dataidx, typeidx)
				var name = this.getName(runidx)
			},

			getServerData1() {
				//模拟 接口数据 2 
				let data = [{
						storeSym: 823, //门店数量
						companyNumber: 0, //缺编人数
						storeName: '北京', //地区
					},
					{
						storeSym: 753, //门店数量
						companyNumber: 0, //缺编人数
						storeName: '天津', //地区
					},
					{
						storeSym: 653, //门店数量
						companyNumber: 0, //缺编人数
						storeName: '上海', //地区
					},
					{
						storeSym: 553, //门店数量
						companyNumber: 0, //缺编人数
						storeName: '新疆', //地区
					},
					{
						storeSym: 832, //门店数量
						companyNumber: 0, //缺编人数
						storeName: '西藏', //地区
					},
				]


				// this.chartsDataMap.series = mapdata.features.filter((x)=>this.storeName==x.properties.name)

				let mapseries = mapdata.features.map((item) => {
					//根据接口数据查找到当前匹配的数据
					let dataItem = data.find((x) => x.storeName == item.properties.name) || {
						storeSym: 0, //门店数量
						companyNumber: 0, //缺编人数
						storeName: item.properties.name, //地区
					}
					//添加到 json data中
					item.data = dataItem
					//设置颜色
					// item.color = this.addColor(dataItem?.storeSym || 0)
					return item
				})

				this.chartsDataMap.series = mapseries
				// console.log(this.chartsDataMap.series, "===this.chartsDataMap.series===")
				// this.getServerData2()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #EEF0F5;
	}

	.eqbg {
		background: #FFFFFF;
		position: sticky;
		top: 0;
		z-index: 99;
	}

	.tabs {
		display: flex;
		align-items: center;
		margin: 0 30rpx;

		&_right {
			width: 100%;
			margin-left: 60rpx;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.tankswiper {
		width: 690rpx;
		height: 100%;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 20rpx auto 0;
	}

	.other {
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		margin: 20rpx 51rpx 30rpx;

		image {
			width: 24rpx;
			height: 24rpx;
			margin-right: 10rpx;
		}
	}

	.classList {
		display: flex;
		flex-wrap: wrap;
		width: 690rpx;
		height: 294rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 30rpx auto 40rpx;
		padding: 30rpx 0rpx 10rpx;

		.classItem {
			width: 20%;
			display: flex;
			margin-bottom: 20rpx;
			flex-direction: column;
			align-items: center;

			image {
				width: 72rpx;
				height: 72rpx;
			}

			.text {
				margin-top: 10rpx;
				font-weight: 500;
				font-size: 20rpx;
				color: #333333;
			}
		}
	}

	.nodetype {
		font-weight: 600;
		font-size: 32rpx;
		color: #333333;
		text-align: center;

		.img {
			width: 690rpx;
			height: 160rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 20rpx auto 40rpx;
			padding: 20rpx;

			image {
				width: 315rpx;
				height: 112rpx;
			}
		}

		.img1 {

			image {
				margin: 20rpx auto 40rpx;
				width: 690rpx;
				height: 200rpx;
			}
		}
	}

	.bot {
		height: 100%;
		position: relative;

		.image1 {
			width: 750rpx;
			height: 1420rpx;
		}

		.image2 {
			width: 750rpx;
			height: 750rpx;
		}
	}

	.cnmap {
		width: 750rpx;
		height: 824rpx;
		padding: 20rpx;
		// background-image: url('../../static/bg@2x.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		margin-top: -10rpx;
		background-color: #051B4A;
	}
</style>